<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="../css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/font-awesome.min.css">
  <link rel="stylesheet" href="../css/monokai_sublime.css">
  <link rel="stylesheet" href="../css/style.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="row ">
  <h1 class="heading first-level">Lesson 1 - jQuery vs AngularJS == outside DOM vs inside DOM</h1>
</div>
<div class="row">
  <div class="col-md-6"><h3 class="left-col heading second-level">jQuery</h3></div>
  <div class="col-md-6"><h3 class="right-col heading second-level">AngularJS</h3></div>
</div>
<div class="row feature-pk">
  <div class="col-md-6 feature-wrapper">
    <div class="left-col feature" id="jq-event-bind"></div>
  </div>
  <div class="col-md-6 feature-wrapper">
    <div class="right-col feature" id="ng-event-bind"></div>
  </div>
</div>
<div class="row feature-pk">
  <div class="col-md-6 feature-wrapper">
    <div class="left-col feature">
      <div class="toolbar">
        <i class="fa fa-square-o fa-lg tool-btn btn-toggle" data-toggle="tooltip" title="focus on"></i>
        <i class="feature-name">You can build your own two-way datd-bind</i>
      </div>
      <img src="img/jq-data-bind.png" style="width:100%; height:calc(100% - 30px);">
    </div>
  </div>
  <div class="col-md-6 feature-wrapper">
    <div class="right-col feature" id="ng-data-bind"></div>
  </div>
</div>
<div class="row feature-pk">
  <div class="col-md-6 feature-wrapper">
    <div class="left-col feature" id="jq-show-hide"></div>
  </div>
  <div class="col-md-6 feature-wrapper">
    <div class="right-col feature" id="ng-show-hide"></div>
  </div>
</div>
<div class="row feature-pk">
  <div class="col-md-6 feature-wrapper">
    <div class="left-col feature" id="jq-switch-dom"></div>
  </div>
  <div class="col-md-6 feature-wrapper">
      <div class="right-col feature" id="ng-switch-dom"></div>
  </div>
</div>
<div class="row feature-pk">
  <div class="col-md-6 feature-wrapper">
    <div class="left-col feature" id="jq-free-render"></div>
  </div>
  <div class="col-md-6 feature-wrapper">
      <div class="right-col feature" id="ng-free-render"></div>
  </div>
</div>
<div class="row feature-pk">
  <div class="col-md-6 feature-wrapper">
    <div class="left-col feature" id="jq-filter"></div>
  </div>
  <div class="col-md-6 feature-wrapper">
    <div class="right-col feature" id="ng-filter"></div>
  </div>
</div>
<div class="row feature-pk">
  <div class="col-md-6 feature-wrapper">
    <div class="left-col feature">
      <div class="toolbar">
        <i class="feature-name">So far, there is no equivalent in jQuery.</i>
      </div>
    </div>
  </div>
  <div class="col-md-6 feature-wrapper">
    <div class="right-col feature" id="ng-watcher"></div>
  </div>
</div>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript" src="js/handlebars.min.js"></script>
<script type="text/javascript" src="../js/highlight.pack.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>